import React from 'react'
import { Menu } from 'antd'
// import UseState from '@/components/functionCOmponents/hooks/UseState.jsx'

import UseState from './UseState.jsx'
import { Route, Routes, Outlet } from 'react-router-dom'
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from '@ant-design/icons'
class Hooks extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const tab = (x, path) => {
      console.log(x)
      document.location.href = '/#' + path
    }

    return (
      <div>
        <h3>hooks</h3>
        <Menu mode="horizontal">
          <Menu.Item
            key={0}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/useState')
            }}
            path="/functionComponent/hooks/useState"
            icon={<MailOutlined />}
          >
            UseState
          </Menu.Item>
          <Menu.Item
            key={1}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/useRef')
            }}
            path="/functionComponent/hooks/useRef"
            icon={<MailOutlined />}
          >
            UseRef
          </Menu.Item>
          <Menu.Item
            key={2}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/useContext')
            }}
            path="/functionComponent/hooks/useContext"
            icon={<MailOutlined />}
          >
            UseContext
          </Menu.Item>



          <Menu.Item
            key={`UseEffect`}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/useEffect')
            }}
            path="/functionComponent/hooks/useEffect"
            icon={<MailOutlined />}
          >
            UseEffect
          </Menu.Item>

          <Menu.Item
            key={`UseReducer`}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/useReducer')
            }}
            path="/functionComponent/hooks/useReducer"
            icon={<MailOutlined />}
          >
            UseReducer
          </Menu.Item>

          <Menu.Item
            key={`UseMemo`}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/useMemo')
            }}
            path="/functionComponent/hooks/useMemo"
            icon={<MailOutlined />}
          >
            UseMemo
          </Menu.Item>

          <Menu.Item
            key={`Memo`}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/memo')
            }}
            path="/functionComponent/hooks/memo"
            icon={<MailOutlined />}
          >
            Memo
          </Menu.Item>

          <Menu.Item
            key={`UseCallback`}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/useCallback')
            }}
            path="/functionComponent/hooks/useCallback"
            icon={<MailOutlined />}
          >
            UseCallback
          </Menu.Item>

          <Menu.Item
            key={`UseContextAndUseReducer`}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/useContextAnduseReducer')
            }}
            path="/functionComponent/hooks/useContextAnduseReducer"
            icon={<MailOutlined />}
          >
            useContext And useReducer
          </Menu.Item>

          <Menu.Item
            key={`CustomHooks`}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/CustomHooks01')
            }}
            path="/functionComponent/hooks/CustomHooks01"
            icon={<MailOutlined />}
          >
            Custom Hooks 1
          </Menu.Item>


          <Menu.Item
            key={`CustomHooks2`}
            onClick={(o) => {
              tab(o, '/functionComponent/hooks/CustomHooks02')
            }}
            path="/functionComponent/hooks/CustomHooks02"
            icon={<MailOutlined />}
          >
            Custom Hooks 2
          </Menu.Item>
        </Menu>
        <div style={{ padding: 8 }}>
          {/* <Routes>
            <Route path="/useState" element={<UseState />} />
          </Routes> */}
          <Outlet />
        </div>
      </div>
    )
  }
}
export default Hooks
